<template>
  <!-- 添加模板 -->
  <h-modal v-model="show" :title="type == 'edit' ? '编辑模板' : '添加模板'" @submit="submit" >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="指令级别" prop="level">
            <a-radio-group buttonStyle="solid" v-model="form.level">
              <a-radio-button :value="0">普通</a-radio-button>
              <a-radio-button :value="1">重点</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="模板名称" prop="mainTitle">
            <a-input v-model="form.mainTitle" :maxLength="50"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="指令等级" prop="grade">
            <a-radio-group buttonStyle="solid" v-model="form.grade">
              <a-radio-button :value="0">普通预警</a-radio-button>
              <a-radio-button :value="1">中级预警</a-radio-button>
              <a-radio-button :value="2">高级预警</a-radio-button>
              <a-radio-button :value="3">特级预警</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="指令名称" prop="orderName">
            <a-input v-model="form.orderName"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="副标题" >
            <a-input v-model="form.title" :maxLength="50"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="收集周期">
            <a-select size="large" v-model="form.collectCycle" placeholder="请选择">
              <a-select-option value="1">1</a-select-option>
              <a-select-option value="2">2</a-select-option>
              <a-select-option value="3">3</a-select-option>
              <a-select-option value="4">4</a-select-option>
              <a-select-option value="5">5</a-select-option>
              <a-select-option value="6">6</a-select-option>
              <a-select-option value="7">7</a-select-option>
              <a-select-option value="8">8</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="专题报告频率" prop="frequency">
            <a-input v-model="form.frequency"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="指令建议" prop="instruction">
            <a-textarea :rows="5" size="large" v-model="form.instruction" placeholder="请输入指令建议容"></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { addOrderTemplate, getOrderTemplate, updateOrderTemplate } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {

        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      modalForm: '',
      show: false,
      type: 'add',
      form: {
        level: 0,
        grade: 0
      },
      id: '',
      rules: {
        level: [{ required: true, message: '请选择' }],
        mainTitle: [{ required: true, message: '请输入' }],
        instruction: [{ required: true, message: '请输入' }],
        grade: [{ required: true, message: '请选择' }],
        orderName: [{ required: true, message: '请输入' }],
        frequency: [{ required: true, message: '请输入' }]
      }
    };
  },
  methods: {
    add() {
      this.type = 'add';
      this.form = {
        level: 0,
        grade: 0
      };
    },
    edit(record) {
      this.type = 'edit';
      // this.form = cloneDeep(record);
      this.getOrderTemplate(record.id);
      this.id = record.id;
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'edit') {
            updateOrderTemplate({ ...this.form, id: this.id }).then(res => {
              this.$message.success('编辑成功');
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({
                level: 0,
                grade: 0
              });
            });
          } else {
            addOrderTemplate(this.form).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep({
              level: 0,
              grade: 0
            });
          });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getOrderTemplate(id) {
      getOrderTemplate({ id }).then(res => {
        this.form = res.data;
      });
    }
  }
};
</script>

<style>

</style>
